import { Button, ButtonProps } from "antd";
import { ButtonPropsDefault, ButtonPropsType } from "../props";
import { Icon } from "@/components/Icon";
import { useMemo } from "react";
import { pick } from "lodash-es";

export default function BasicButton(props: ButtonProps & ButtonPropsType & ComponentNode) {
	props = Object.assign({}, { ...ButtonPropsDefault, ...props });

	// const { useToken } = theme
	// const { token } = useToken()
	// get component class
	const attrs = {};
	const getButtonClass = useMemo(() => {
		const classList = [props.className];
		if (props.disabled) classList.push("is-disabled");
		return classList.join(" ");
	}, [props.className, props.disabled]);

	// get inherit binding value
	const getBindValue = useMemo(() => {
		let propsData: any = {
			...attrs,
			...props
		};
		propsData = pick(propsData, ["type", "disabled", "loading", "size"]);
		return propsData;
	}, [props]);

	const getButtonColor = useMemo(() => {
		switch (props.color) {
			case "primary":
				return "color-primary";
			case "error":
				return "color-error";
			case "warning":
				return "color-warning";
			case "success":
				return "color-success";
			default:
				return "";
		}
	}, [props.color]);

	return (
		<Button
			{...getBindValue}
			style={{
				backgroundColor: getButtonColor
			}}
			className={getButtonClass}
			onClick={() => props.onClick && props.onClick()}
		>
			{props.preIcon && <Icon icon={props.preIcon} size={props.iconSize} />}
			{props.children}
			{props.postIcon && <Icon icon={props.postIcon} size={props.iconSize} />}
		</Button>
	);
}
